In this tutorial you will create a simple office scene and add a desk and a coke machine
to your office.
SPINNER Beta 1
Hello! Thank you for purchasing SPINNER, a scene layout tool for assembling VRML worlds in a
realtime rendered environment. Using SPINNER, you will be able to import Autodesk's DXF, 3DS files,
Sense8's objects into a . There are thousands of 3d files on the Internet. Try the following URL for 3d
freeware and shareware. Once you are at the URL below, choose the "model market":
http://www.lightside.com/~dani/
Conventions
The term 'scene' refers to a SPINNER file containing objects. When you save a scene
it is saved as my_scene.3dw. You can export a scene to a VRML format which
becomes my_scene.wrl. Keep in mind that you must 'Export' to VRML format not just
save a file as a my_scene.wrl under the [File] [Save] menu.
Single menu items and multiple menu selections are represented with brackets as
follows, respectively: [Key1] or [Key2] [Key3]. For example, [Object] [New Sphere]
means click on the 'Object' menu option in the 3D View, drag the left mouse button to
the submenu option 'New Sphere' then select that option. Keystrokes that should be
pressed simultaneousely are represented by brackets. For example, the bracketed
items <Control> or <Select> indicate that you should hold down the Control key while
selecting an object with your left mouse button. Also if we say <Control> click, this
means hold the Control key while simultaneously clicking on an object with the left
mouse button.
Whenever we say 'click on an object,' we mean, press the left mouse button then let
go. So unless we specify a particular mouse button, we always mean the left mouse
button. Right Mouse Click means to press the right mouse button.
When we say 'Drag' an object, we represent this action as clicking and holding the left
mouse button while moving the cursor or an object around.
When we say 'Right and Left Mouse Click' we represent this action as simultaneously
clicking on the left and right mous buttons. Usually we use this action to climb and dive
(pitch, roll, yaw for all you 3D buffs).
Words in quotations usually mean to enter them with the keyboard (such as enter,
"Light1" as the new light object). Words in quotations could also imply an action to be
performed at dialog boxes. For example, click on the "Y" radio button or Click "Apply."
All other uses will use the 'single quotation marks.'
Overview Of Windows
The first two windows appear at the top of your monitor.
3D View
From this window, you can view the current scene in a real time 3D solid-filled rendered
window. modifying the viewpoint (see 'Fly Mode' under Options menu). The user may also pick objects in the world (see 'Pick Mode' under Options menu) and move objects around inside the universe (see 'Object Fly' under options menu). This is also the windows where you pick individual polygons for editing.
Object Master
This window displays a tree of objects currently in the scene. The user may select different
objects by clicking on the object name. If control is held down and you click on another object, multiple objects may be selected and modified. This is useful for using the alignment or moving multiple objects.
The next three windows appear on the bottom of your monitor.
Ortho Windows: The bottom set of windows are called Orthogonal or Ortho Views. These windows are
useful for visualizing your objects in one plane at a time. You can not pick (select) objects from these windows (in Beta I) but you can move and rotate preselected objects (objects highlighted in blue) in any of these windows. You can only move objects which are selected. If you selected multiple objects from the Object Master, you can move them simultaneously in any of the Ortho Views.
Top View
A viewpoint looking down the scene (along the Y axis). This is also called the X-Z plane.
Front View
A viewpoint looking at the face of the scene in line (along the Z axis). This is also called the X-Y plane
Side View
A viewpoint looking at the side of the scene (along the X axis). This is also called the Y-Z plane.
SPINNER obeys the left hand rule for describing 3d coordinates
The Ortho Windows provide you, the 3D Web SPINNER, with three views to assist in moving and
aligning objects. They are organized as follows:
In this tutorial, we are going to create a terrain, add an office, a desk, a lamp, a camera
and anchor a URL to the lamp. If you just started SPINNER, you probably have our
3dweb.3dw file loaded. Click on the Document icon to build a new scene.
Create a Terrain. Choose [Object] [New Terrain]. Notice that their is a description
box which describes patch colors. In SPINNER, you can define a terrain with multi
colored patches similar to the black and white squares on a checkerboard. Click the
"Color" button which is position under the number "1:." This launches a Color dialog
box. Choose a light color such as fluorescent green then click "OK." The word "Color"
now has a dotted line surrounding it. This indicates that you have defined a color for
one of the patches. Now click on the "Color" button under the number "2:." Let's
choose white for the other patch in the terrain. Just press "OK" without choosing a
color and the other patch will default to white. Now you are back at the Create a New
Terrain dialog box. Click "OK" and you will create a terrain. In the 3D View, you should
not see the terrain. But in the Top View Ortho View at the bottom you should see a
ten-by-ten checkerboard outlined in blue. And in the Front and Side Views you should
see a solid blue line. The reason you do not see the terrain in the 3D View is because
your viewpoint is in line with the terrain (i.e., you're eyes are in line with the terrain). To
see the terrain, click on the "Airplane" icon to fly the default camera (i.e., your
viewpoint) and position the "Airplane" above the crosshairs in the 3D View. Click on the
right mouse button 4 or 5 times. The terrain you just created should come into view.
Keep the Airplane icon above the crosshairs in the 3D View and click the left mouse
button 3 or 4 times. You should move forward while hovering over the terrain. Now
position the "Airplane" below the crosshairs in the 3D View and press the left mouse
button 3 or 4 times. You should move backward to where you started.
Move and Rotate the Light. Click on the Light in the Object Master. Notice that a
blue box appears in the 3D View in addition to all three Ortho Views. This box is called
a bounding box because it bounds the object, which in this case is the camera. In
SPINNER, a selected object or multiple selected objects are represented by a blue
bounding box in the 3D View and the Ortho Views. Selected object are highlighted in
red in the Object Master. Next, position the cursor anywhere in Top View Ortho
window, click and hold the left mouse button and move it around. Notice the light
(again, represented by a blue bounding box) moves in all four windows but the light
never moves in the Y axis. Whenever you move an object in an Ortho window, the
object will only move in one plane, depending on which Ortho view you position the
cursor in. Our scene probably looks a bit dim. So let's boost up the ambient light.
Choose <View> <Ambient Light> and slide the button bar to the right to about 2/3 'full
power' to increase the ambient light in your scene. (Full power is when the button is
touching the right arrow button. Ambient light in SPINNER is analogous to a turning up
a dimmer switch in the real world.) Click "Close" to save your changes. Keep in mind
that when you save your VRML scene, you must make sure that your scene is well lit
with all ambient lights turned off because VRML does not recognize ambient lights.
Now let's rotate the light in the Front View. Make sure the Light object is selected
(Again, it should be highlighted in red in the Object Master and surrounded by a blue
bounding box in the rest of the windows.) Position the cursor in the Front View. Press
and hold the right mouse button. Notice that a faint, light blue circle with a hashmark
breaking the circle appears in the center of the object you want to move. This blue
circle is always in the middle of each object to give you an indication of where you are
in the rotation. Eventually we will keep one hashmark stationary and have a different
colored hashmark update as you rotate the object. This way you can tell how many
degrees you rotated an object by looking at the number of degrees between the two
hashmarks. Notice that when you move the mouse around the object, the object will
move in all three Ortho views and the 3D View. Notice also that the objects become
dimmer or brighter depending on the angle the light is shining. Remember that only
directional lights are immediately visible within SPINNER but all three lights - point,
directional and spot - will export to VRML (We're fixing this!). Now try rotating the light
in the xz plane (Top View Ortho View). Notice that there is very little effect. This is
because a directional light is analogous to the sun and rotating the 'sun' in the top view
is the same as rotating the real sun - nothing would happen. Rotating the 'sun' in the
other Ortho views is analogous to changing the time of day on earth - rotations in these
Ortho Views do affect the scene.
You can rotate objects another way - Click on the four-way arrow in the toolbar (to the
left of the block icon). You are now in object fly mode. Refer to the reference manual
and you can get a full breakdown of the mouse buttons or you can experiment with the
right, left and simultaneous left and right buttons.
If you have multiple objects selected (by <Control> clicking on multiple objects) and you
rotate objects in an Ortho View with the right mouse button, the blue circle will appear
at the center of the object that your mouse is closest. Also, both objects will rotate
around their own axis. This is convenient if you want to position a parking lot full of
cars on a terrain.
Import an Office Plan. Before importing an office plan, make sure you can see the
terrain. You may have to raise your viewpoint a few 'right mouse clicks.' Choose
<Object> <Import> then click the "Browse" icon. Browse in the SPINNER\Models
directory and choose "oplan.nff". Click OK and an office plan will appear in the scene.
Move around this plan to get a feel for flying. Notice that your terrain has 'disappeared'
but it is still included in the Object Master. The terrain is really there, it's just too small
compared to this office plan. This problem will happen often when you import your own
objects because objects created in SPINNER do not necessarily have the same unit
size as objects you import.
Scale the Terrain and drop the Office Plan EXACTLY onto the Terrain. Double click
on terrain object in the Object Master. From the Scale / Stretch area, Click and hold
the right scale arrow (you should see the terrain become larger and slice the office plan
in the xy and yz planes. Continue enlarging the terrain until it is larger than the
bounding box of the office plan. Close the Edit Object dialog box by clicking on
"Close."
Now we want to drop the office plan EXACTLY onto the terrain. The reason we
capitalized EXACTLY is because sometimes we don't want objects such as the office
plan to be approximately on top of the terrain, but rather EXACTLY on top of it. To do
this we need to use the alignment tool. (We may add a 'snap to grid' feature soon; the
problem with this option . We are planning to vastly improve the GUI for aligning
objects, in Release 1). <Control> click on the Oplan from the Object Master. Both the
terrain and oplan should be highlighted in red. Choose <Alignment> <Align>. Choose
the terrain as the anchor (this means the terrain will be stationary and the oplan will
move.) Look at the Front and Side Ortho views. Imagine lowering the office plan onto
the terrain in both of these windows. What would you do? Visually, you want to raise
the "oplan" object. Now look at the menu options of the alignment tool. There are two
radio buttons we need to select: one of the axises and the one point we want the
objects to touch at (i.e., center, touch, top or bottom of the anchor, which in this case is
the terrain). In SPINNER, objects touch at their blue bounding box. So visually You
want the "bottom" of both objects to share the same Y value. Choose the "Y" radio
button then click "Apply." You should see the oplan object position itself on top of the
terrain in all views.
Move the Camera. You can move cameras around in the 2D view pretty easily. When
you are in Fly mode, Left mouse click anywhere in any of the 2D views and the camera
(denoted by a green airplane) will move to that location. Right-mouse click anywhere in
the same 2D view, and the camera will point toward that spot.
Zoom Out and Zoom In. Click on the magnifying glass in the tool bar. Now right-
mouse click and left mouse-click in the 2D Views to zoom out and zoom in,
respectively.
Add a Desk. Choose [Object] [Import] then click the "Browse" icon. Browse the
Models directory and choose "desk.nff" then click "OK". You will not see the desk
object because like the Terrain object, it is too small. To 'find' it, click on the desk
object in the Object Master. Position the cursor in the Front Ortho View and move your
cursor up and down in this window. You should see a tiny black dot moving up and
down with your cursor. This is your desk! Pretty small, huh. Double click on the Desk
object in the Object Master and scale it larger similar to the way you enlarged the
Terrain. Click close. Position the cursor anywhere in the Top View window. Click and
hold the left mouse button and move the desk around. You should see the desk moving
away from you (into the screen) in the View window. Position the desk in the center of
the terrain. <Control> click on the "Terrain" in the Object Master. You should see both
Terrain and Desk objects highlighted. Choose [Alignment] [Align]. In the Alignment
Tool window select "Y" circle in the axis section. Click and hold the down arrow in the
"Anchor" section. Select "Terrain" from the list and release the mouse. Select the
bottom button. Click on Apply. Click on Close. You have now dropped the desk onto
the terrain. The 'Bottom' of the desk should now touch the terrain. Now position the
desk somewhere on the terrain without touching any of the objects in Oplan: Make
sure only the Desk is highlighted in the Object Master then from the Top View Ortho
View, move the desk in the appropriate position.
Stretch the Desk to Make it Longer. Choose [Object] [Deselect All]. This command
deselects all the objects in the Object Master. From the Object Master, double click on
Desk. This will launch an Edit Object dialog box. Click on the right arrow of the
Scale/Stretch box. The Desk object will enlarge in all directions. Click "Close" to
activate changes.
Add a Desk Lamp with a Light. First import a desk lamp. Choose [Object] [Import]
and browse in the Models directory for "Lampa.nff." Click "OK" and the lamp will
appear under the desk. Put the lamp on the desk using the alignment tool. Now we
will stick a point light on our desk lamp. Due to the limitations of the SPINNER beta,
point lights do not illuminate correctly in the view window, but if they are converted into
Webspace they will appear as they should. Using the Alignment Tool, choose "Touch"
"Y", then "Center" "Z." The lamp should now be floating in space but in the same xz
plane as the desk. Deselect the Desk and using the Top View Ortho View, move the
lamp so that it is on top of the desk. Choose [Object] [Deselect All] to deselect all
objects. Choose [Object] [New Light] and select a Point light. Name the new light
"Light2" and click on OK. Click on Light2 in the Object Master then click on the Four
Way Arrow icon in the toolbar to fly the light under the lamp. Alternately you can move
the lamp from the Ortho Views. Because this is a point light, this lamp does not have a
shade (i.e. a point light has no directional attributes). You probably have a pretty big
object representing your light bulb. You can make the Light objects invisible by
unchecking [View] [Lights visible]. Now Light objects are only visible if you select them
in the Object Master. Now we have a point light source under the desk lamp. If you
export this file to a VRML browser, the point light will illuminate the desk directly under
the desk lamp.
Add Textures. This process will be made much easier when Drag and Drop is
implemented in Beta 2, but for now we will use this process. Another point of note is
that in the early alpha of Worldview and the NT beta of Webspace textures did not
seem to be properly loaded. This will inevitably be fixed, and the textures that are
saved into the .WRL file by SPINNER are fully VRML spec 1.0 compliant.
Choose [Object] [Deselect All]. Fly over to the waterfall picture in the Office. Right
Mouse Click on the Waterfall. This will launch a Polygon dialog box. Click "Add" then
choose the "Psych" texture then click "OK." Close the Polygon box. Now Right Mouse
Click on outside of the "Psych" texture on the wall of the office. Click "Add" then
choose the "Paper" texture. Click "Close." If you wanted to texture the terrain with the
same texture, you would double click on the Terrain object in the Object Master then
click "Apply."
Create another Camera. Fly around so that your viewpoint is positioned at the
Psychedelic picture on the wall. Now click on the icon that looks like an airplane with a
plus sign. It is to the right of the open box. A dialog box will appear. Enter the word,
"Waterfall" then click "OK" Now fly around a bit more and stop. Now double click on
the camera marked Waterfall. You should be staring at the Waterfall again. This
feature is useful if you want someone to look at something and not have them go
through the trouble of exactly positioning themselves at this certain spot.
Embed a URL link onto an object
Choose [Object] [New Group] This will launch the Create New Group window.
Alternatively, you could have clicked on the icon which looks like an Open Box. Click
on name and enter "Link1". Click on the Anchor circle. Click on the entry field in the
Link area and type in a URL such as http://www.lamp.com. Click on Close. This created
a group with a link to WWW.LAMPS.COM, a fictional lamp reseller. But we have a
group with no object in it. Let's drag the lamp object and drop it onto the Group object.
Click on the Lamp object to select it. Let go of the mouse button. Drag the Lamp
object and drop it onto the Link1 object. While doing this you should have seen a
document icon appear. This makes Lamp1 a clickable URL link to
WWW.LAMPS.COM when it is in a VRML browser. When you are viewing this URL
with a VRML browser you will see this the desk lamp turn orange in WebSpace and in
WorldView it will turn into a hand icon.
Next tutorial
Next time we'll use the LOD feature to build a door that opens. We'll also create paths
